<template>
  <div class="product_list">
    <slot></slot>
    <div class="loading" v-if="loading">
      <van-loading color="#ff690c" size="50" />
    </div>
    <ul v-if="!loading">
      <li v-for="i in list" :key="i.cate_id">
        <router-link :to="`/CateDetail?cata_id=${i.cate_id}`">
          <div class="product_list_img"><img :src="i.img" /></div>
          <p class="product_list_title">{{ i.name }}</p>
          <p class="product_list_price">
            ￥{{ i.price }} <span>{{ i.payer_num }}人已付款</span>
          </p></router-link
        >
      </li>
    </ul>
    <p v-if="!loading">已经没有啦~</p>
  </div>
</template>

<script>
import { getFunc } from "@/http/request.js";

export default {
  name: "product_list",
  data() {
    return {
      list: [],
      list2: [],
      loading: false,
    };
  },
  props: ["classify", "sort_", "keyword"],
  watch: {
    classify() {
      if (!this.keyword) {
        this.initList();
      } else {
        this.rank();
      }
    },
    sort_() {
      if (!this.keyword) {
        this.initList();
      } else {
        this.rank();
      }
    },
    keyword() {
      this.getSearch();
    },
  },
  methods: {
    async initList() {
      // 请求商品列表
      this.loading = true;
      await getFunc("/cate/list").then((data) => {
        if (data.code == 200) {
          this.list = data.result;
          this.list2 = this.list;
          this.rank();
        }
      });
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
    async getSearch() {
      this.loading = true;

      await getFunc(`/cate/search?keyword=${this.keyword}`).then((data) => {
        if (data.code == 200) {
          this.list = data.result;
          this.list2 = this.list;
          this.rank();
        } else if (data.code == 1) {
          this.list = [];
        }
      });
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },

    rank() {
      // 通过分类筛选美食
      if (this.classify) {
        // console.log(this.classify);
        if (this.keyword) {
          this.list = this.list2;
        }
        this.list = this.list.filter((item) => {
          if (item.classify == this.classify) {
            return item;
          }
        });
        // this.list2 = this.list1;
      } else {
        if (this.$route.name != "order") {
          this.list = this.list2;
        }
      }
      // 按条件排序
      if (this.sort_ != undefined) {
        if (this.sort_ == "a") {
          this.list1 = this.list2;
        } else if (this.sort_ == "b") {
          this.list.sort((a, b) => {
            return a.price - b.price;
          });
        } else if (this.sort_ == "c") {
          this.list.sort((a, b) => {
            return b.price - a.price;
          });
        } else if (this.sort_ == "d") {
          this.list.sort((a, b) => {
            return b.payer_num - a.payer_num;
          });
        }
      }
    },
  },
  mounted() {
    this.initList();
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";
.loading {
  width: 13.3333vw;
  margin: 0 auto;
}
.product_list {
  ul {
    display: flex;
    justify-content: space-between;
    padding: $p;
    flex-wrap: wrap;
    li {
      width: 48%;
      // height: 58.1333vw;
      margin-top: 3vw;
      border: 1px solid $bgc;
      border-radius: 1vw;
      .product_list_img {
        width: 100%;
        height: 45vw;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        margin-top: 1vw;
        padding-left: 1vw;
      }
      .product_list_title {
        color: #797d94;
        font-size: 3.7333vw;
      }
      .product_list_price {
        color: $bgc;
        font-size: 4.8vw;
        margin-bottom: 2vw;
        span {
          font-size: 3.2vw;
          color: #aaa;
        }
      }
    }
  }
  & > p {
    text-align: center;
    height: 10vw;
    line-height: 10vw;
    font-size: 3.2vw;
    color: #ccc;
  }
}
</style>